<template>
  <div class="chat-container">
    <div class="chat-title">
      <div class="chat-name" v-if="group" >{{ group.groupName }}</div>
    </div>
    <div class="chat-main" ref="scrollView">
      <div class="message-list">
        <div v-for="message in history">
          <div class="message-item">
            <div class="message-item-content"
                 :class="{ self: message.senderId.toString() === currentUser.userId.toString() }">
              <div class="sender-info">
                <img v-if="currentUser.userId.toString() === message.senderId.toString()" :src="currentUser.avatar"
                     class="sender-avatar"/>
                <div v-if="currentUser.userId.toString() !==
                message.senderId.toString()">
                  <img :src="message.senderAvatar"
                       class="sender-avatar"/>
                </div>
              </div>
              <div class="message-content">
                <div class="sender-name" :class="{ self: message.senderId.toString() === currentUser.userId.toString() }">{{message.senderName}}</div>
                <div class="message-payload">
                  <div v-if="message.messageType === 'MESSAGE'" class="content-text">
                    <div v-if="message.messageTextType === 'IMAGE'" @click="showImagePreviewPopup(message.text)">
                      <img :src="message.text" class="content-image">
                    </div>
                    <div v-if="message.messageTextType === 'TEXT'">
                      {{ message.text }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-footer">
      <div class="action-box">
        <div class="action-bar">
          <!-- 图片 -->
          <el-upload
            class="iconfont upload-demo"
            :action="uploadImgUrl"
            :headers="headers"
            :on-success="handleUploadSuccess"
            :file-list="fileList">
            <i class="el-icon-picture-outline"></i>
          </el-upload>
        </div>

        <!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->
        <div class="input-box">
          <textarea ref="input" @keyup.enter="sendTextMessage" v-model="newMessage" maxlength="700" autocomplete="off"
                    class="input-content"></textarea>
        </div>
        <div class="send-box">
          <button class="send-button" @click="sendTextMessage">发送</button>
        </div>
      </div>
    </div>
    <div v-if="imagePreview.visible" class="image-preview">
      <img :src="imagePreview.url" alt="图片"/>
      <span class="close" @click="hideImagePreviewPopup">×</span>
    </div>
  </div>
</template>

<script>

import {getGroup} from "@/api/message/group"
import {getMessage, getOrderListByUserId, getUserById} from "@/api/message/message";
import {getToken} from "@/utils/auth";
import {getGroupMessage} from "@/api/message/groupMessage"

export default {
  name: 'GroupChat',

  computed: {
    Id: {
      get() {
        // 返回计算属性的值
        return this.$store.state.chat.id;
      },
      set(value) {
        // 在这里处理计算属性的赋值操作
        this.$store.commit('SET_ID', value);
      }
    }
  },
  watch: {
    Id: {
      handler() {
        if (this.$store.state.chat.id !== "") {
          getGroup(this.$store.state.chat.id).then(resp => {
            this.group = resp.data
          })
          getGroupMessage(this.$store.state.chat.id).then(resp => {
            this.history = resp.rows
            this.messageLength = this.history.length
            this.$nextTick(() => {
              let scrollView = this.$refs.scrollView
              scrollView.scrollTop = scrollView.scrollHeight;
            })
          })
        } else {
          this.group = ""
        }
      },
      immediate: true,
      deep: true
    },
    messageLength: {
      handler() {
        this.$nextTick(() => {
          let scrollView = this.$refs.scrollView
          scrollView.scrollTop = scrollView.scrollHeight;
        })
      }
    }
  },
  data() {
    return {
      messageLength:"",
      avatarUrl: "",
      history: [],
      newMessage: "",
      currentUser: {},
      group: {},
      fileList: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      text: '',
      // 订单消息
      orderList: {
        orders: [],
        visible: false,
      },
      // 图片预览弹出框
      imagePreview: {
        visible: false,
        url: ''
      },
      nickName:""
    };
  },
  created() {
    this.Id = this.$store.state.chat.id
    this.currentUser = this.$store.state.user.user
    let webSocket = new WebSocket("ws://localhost:8080/message/ws/" + this.currentUser.userId);
    webSocket.onopen = (evt) => {
    }
    webSocket.onclose = (evt) => {
    }
    webSocket.onmessage = (evt) => {
      let data = JSON.parse(evt.data)
      if (data.type === "JOIN" || data.type === "LEAVE") {
      } else if (data.toId.toString().includes("单")) {
      } else if (data.toId === this.group.id.toString()) {
        const newMessage = ({
          senderId: data.senderId,
          text: data.text,
          createTime: data.createTime,
          messageType: data.type,
          unread: data.unread,
          groupId: this.group.id,
          messageTextType: data.textType,
          senderName:data.senderName,
          senderAvatar:data.senderAvatar
        })
        this.history.push(newMessage);
        this.messageLength = this.history.length
      }
    };
    webSocket.onerror = (evt) => {
      console.info("出现错误", evt)
    };
    this.webSocket = webSocket
  },
  methods: {

    sendOrderMessage(order) {
    },
    closeOrderMessageList() {
      this.orderList.visible = false;
    },
    showOrderMessageList() {
      this.orderList.orders = "";
      this.orderList.visible = true;
    },
    hideImagePreviewPopup() {
      this.imagePreview.visible = false;
    },
    showImagePreviewPopup(url) {
      this.imagePreview.visible = true;
      this.imagePreview.url = url;
    },
    handleUploadSuccess(res, file) {
      this.fileList = []
      const newMessage = {
        toId: this.group.id,
        text: res.data.url,
        senderId: this.$store.state.user.user.userId,
        type: "MESSAGE",
        textType: "IMAGE",
        senderName:this.currentUser.nickName,
        senderAvatar:this.currentUser.avatar
      };

      this.webSocket.send(JSON.stringify(newMessage))
    },
    sendTextMessage() {
      if (this.newMessage.trim()) {
        const newMessage = {
          toId: this.group.id,
          text: this.newMessage,
          senderId: this.$store.state.user.user.userId,
          type: "MESSAGE",
          textType: "TEXT",
          senderName:this.currentUser.nickName,
          senderAvatar:this.currentUser.avatar
        };
        this.webSocket.send(JSON.stringify(newMessage))
        this.newMessage = '';
      }
    },

  }
}
</script>

<style scoped>
.chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.upload-demo {
  text-align: left;
  padding: 10px 0;
  position: relative;
  color: black;
  font-size: 22px;
}

.chat-title {
  height: 40px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-size: 25px;
}

.chat-avatar {
  width: 35px;
  height: 35px;
}

.chat-name {
  font-family: 楷体;
  width: 400px;
  font-size: 20px;
  margin-left: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.chat-main {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}

.chat-main::-webkit-scrollbar {
  width: 0;
}

.chat-main .history-loaded {
  text-align: center;
  font-size: 12px;
  color: #cccccc;
  line-height: 20px;
}

.chat-main .load {
  text-align: center;
  font-size: 12px;
  color: #d02129;
  line-height: 20px;
  cursor: pointer;
}

.history-loading {
  width: 100%;
  text-align: center;
}

.time-tips {
  color: #999;
  text-align: center;
  font-size: 12px;
}

.message-list {
  padding: 0 10px;
}

.message-item {
  display: flex;
}

.message-item-checkbox {
  height: 50px;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.input-checkbox {
  position: relative;
}

.message-item-checkbox input[type="checkbox"]::before, .message-item-checkbox input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  background: #FFFFFF;
  width: 18px;
  height: 18px;
  border: 1px solid #cccccc;
  border-radius: 50%;
}

.message-item-checkbox input[type="checkbox"]:checked::before {
  content: "\2713";
  background-color: #d02129;
  width: 18px;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}

.message-item-content {
  flex: 1;
  margin: 5px 0;
  overflow: hidden;
  display: flex;
}

.sender-info {
  margin: 0 5px;
}

.sender-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.message-content {
  max-width: calc(100% - 100px);
}

.message-payload {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}


.message-read {
  color: gray;
  font-size: 12px;
  text-align: end;
  height: 16px;
}

.message-unread {
  color: #d02129;
  font-size: 12px;
  text-align: end;
  height: 16px;
}

.content-text {
  display: flex;
  align-items: center;
  text-align: left;
  background: #eeeeee;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 8px;
  margin: 3px 0;
  line-height: 25px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  border-radius: 8px;
  word-break: break-all;
}

.content-image {
  display: block;
  cursor: pointer;
  height: 80px;
  width: 80px;
}

.content-image img {
  max-height: 200px;
}

.content-audio {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.content-audio .audio-facade {
  min-width: 12px;
  background: #eeeeee;
  border-radius: 7px;
  display: flex;
  font-size: 14px;
  padding: 8px;
  margin: 5px 0;
  line-height: 25px;
  cursor: pointer;
}

.content-audio .audio-facade-bg {
  background: url("../../../assets/images/voice.png") no-repeat center;
  background-size: 15px;
  width: 20px;
}

.content-audio .audio-facade-bg.play-icon {
  background: url("../../../assets/images/play.gif") no-repeat center;
  background-size: 20px;
}

.content-order {
  border-radius: 5px;
  border: 1px solid #eeeeee;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.content-order .order-id {
  font-size: 12px;
  color: #666666;
  margin-bottom: 5px;
}

.content-order .order-body {
  display: flex;
  font-size: 13px;
  padding: 5px;
}

.content-order .order-img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}

.content-order .order-name {
  margin-left: 10px;
  width: 135px;
  color: #606164;
}

.content-order .order-count {
  font-size: 12px;
  color: #666666;
  flex: 1;
}

.content-file {
  width: 240px;
  height: 65px;
  font-size: 15px;
  background: #FFFFFF;
  border: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.content-file:hover {
  background: #f1f1f1;
}

.file-info {
  width: 194px;
  text-align: left;
}

.file-name {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.file-size {
  font-size: 12px;
  color: #ccc;
}

.file-img {
  width: 50px;
  height: 50px;
}

.message-item .self {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.message-item .self .audio-facade {
  flex-direction: row-reverse;
}

.message-item .self .audio-facade-bg {
  background: url("../../../assets/images/voice.png") no-repeat center;
  background-size: 15px;
  width: 20px;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.message-item .self .play-icon {
  background: url("../../../assets/images/play.gif") no-repeat center;
  background-size: 20px;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.message-recalled {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 28px;
  font-size: 13px;
  text-align: center;
  color: grey;
  margin-top: 10px;
}

.message-recalled-self {
  display: flex;
}

.message-recalled-self span {
  margin-left: 5px;
  color: #D02129;
  cursor: pointer;
}

.chat-footer {
  border-top: 1px solid #dcdfe6;
  width: 100%;
  height: 140px;
  background: #FFFFFF;
}

.action-delete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}

.delete-btn {
  width: 25px;
  height: 25px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 10px;
}

.action-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.action-bar {
  display: flex;
  flex-direction: row;
  padding: 0 10px;
}

.action-bar .action-item {
  text-align: left;
  padding: 10px 0;
  position: relative;
}

.action-bar .action-item .iconfont {
  font-size: 22px;
  margin: 0 10px;
  z-index: 3;
  color: #606266;
  cursor: pointer;
}

.action-bar .action-item .iconfont:focus {
  outline: none;
}

.action-bar .action-item .iconfont:hover {
  color: #d02129;
}

.emoji-box {
  width: 210px;
  position: absolute;
  top: -111px;
  left: -11px;
  z-index: 2007;
  background: #fff;
  border: 1px solid #ebeef5;
  padding: 12px;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  border-radius: 4px;
}

.emoji-item {
  width: 38px;
  height: 38px;
  margin: 0 2px;
}

.input-box {
  padding: 0 10px;
  flex: 1;
}

.input-content {
  border: none;
  resize: none;
  display: block;
  padding: 5px 15px;
  box-sizing: border-box;
  width: 100%;
  color: #606266;
  outline: none;
  background: #FFFFFF;
  word-break: break-all;
}

.send-box {
  padding: 5px 10px;
  text-align: right;
}

.send-button {
  width: 70px;
  height: 30px;
  font-size: 15px;
  border: 1px solid #d02129;
  background-color: #ffffff;
  color: #d02129;
  border-radius: 5px;
}

.action-popup {
  width: 848px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -281px;
  background: rgba(51, 51, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-popup-main {
  width: 150px;
  height: 120px;
  background: #ffffff;
  z-index: 100;
  border-radius: 10px;
  overflow: hidden;
}

.action-popup-main .action-item {
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  color: #262628;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}

.image-preview {
  max-width: 750px;
  max-height: 500px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
}

.image-preview img {
  max-width: 750px;
  max-height: 500px;
}

.image-preview .close {
  font-size: 50px;
  line-height: 24px;
  cursor: pointer;
  color: #FFFFFF;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 1002;
}

.order-box {
  width: 848px;
  position: absolute;
  left: -281px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2007;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 33, 33, 0.7);
}

.order-list {
  width: 300px;
  background: #F1F1F1;
  border-radius: 5px;
}

.order-list .title {
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-list .title span {
  font-size: 28px;
  font-weight: 400;
  cursor: pointer;
}

.order-list .order-item {
  padding: 10px;
  background: #FFFFFF;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.order-list .order-id {
  font-size: 12px;
  color: #666666;
  margin-bottom: 5px;
}

.order-list .order-body {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.order-list .order-img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.order-list .order-name {
  width: 160px;
}

.order-list .order-count {
  font-size: 12px;
  color: #666666;
  flex: 1;
}
.sender-name{
  text-align: left;
  font-size: 15px;
  margin-left: 5px;
}
.sender-name.self{
  text-align: right;
  font-size: 15px;
  margin-right: 5px;
}

</style>
